<template>
	<view class="app">
		<view class="address-info">
			<view class="address-form">
				<u-form :model="address" ref="uForm" >
					<u-form-item prop="address_contacts" label="联系人" :label-align="labelAlign" :label-width="labelWidth">
						<u-input maxlength="20" v-model="address.address_contacts" placeholder="请输入联系人" />
					</u-form-item>
					<u-form-item   prop="address_mobile" label="联系电话" :label-align="labelAlign" :label-width="labelWidth">
						<view class="address-goto-map" >
							<u-input style="margin-right: 10rpx;" maxlength="15" v-model="address.address_mobile" placeholder="请输入联系电话" />
						</view>
					</u-form-item>
					<u-form-item prop="address_name" label="所在区域" :label-align="labelAlign" :label-width="labelWidth">
						<view class="address-goto-map" @click="chooseLocation">
							<text class="address-goto-map-tips">{{ address.address_name || '请选择区域'}}</text>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-form-item>
					<u-form-item label="详细地址" :label-align="labelAlign" :label-width="labelWidth">
						<u-input type="textarea" v-model="address.address_door" placeholder="请输入详细地址，如门牌号" />
					</u-form-item>
					<u-form-item label="默认地址" :label-align="labelAlign" :label-width="labelWidth">
						<u-switch active-color="#19be6b" @change="addressDefaultChange" slot="right" v-model="address.address_default" active-value="1" inactive-value="0"></u-switch>
					</u-form-item>
				</u-form>
			</view>
		</view>
		<view class="address-bottom-row">
			<u-button shape="square" type="success" @click="saveAddress">保存地址</u-button>
		</view>
		<c-safe-bottom></c-safe-bottom>
	</view>
</template>
<script>
	import map from "../../components/TxAddress/qqmap-wx-jssdk";
	export default {
		data() {
			return {
				labelWidth: 150,
				labelAlign: "right", 
				address: {
					address_contacts: '',
					address_name: '',
					address_mobile:''
				},
				rules: {
					address_contacts: [{
						required: true,
						message: '请输入联系人',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur',
					}],
					address_mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['blur'],
					}],
					address_name: [{
						required: true,
						message: '请选择所在区域',
						trigger: 'change'
					}]
				},
			}
		},
		methods: {
			chooseLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						// let mapsdk = new map({
						// 	// Z5UBZ-XZJY3-5LE3A-RX26P-CZJJ6-27FAY
						// 	key: 'CMEBZ-IKFLI-YRLGA-U4TMG-7XPUH-TLFBQ' // 必填
						// });
						// mapsdk.reverseGeocoder({
						// 	location: {
						// 		latitude: res.latitude,
						// 		longitude: res.longitude
						// 	},
						// 	success: (req) => {
						// 		_this.address.addressCity = req.result.ad_info.city
						// 		_this.address.addressProvince = req.result.ad_info.province
						// 		_this.address.addressDistrict = req.result.ad_info.district
						// 	},
						// 	fail: (error) => {console.log(error,'我是佛山');	}
						// });
						_this.address.address_name = res.name
						_this.address.address_address = res.address
						_this.address.address_latitude = res.latitude
						_this.address.address_longitude = res.longitude
						console.log(`返回地址：`,res)
					},
					fail: function(err) {
						console.log("err", err)
					}
				});
			},
			addressDefaultChange(res){
				this.address.address_default = res
			},
			saveAddress() {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false
					} 
					
					this.$u.api.address.saveAddress(this.address).then(res => {
						this.$u.toast(res.msg)
						if(res.code != 1){ 
							return false
						}
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}).catch(err => {
						this.$u.toast('保存失败')
					})
				});
			},
			getAddressInfo(address_id){
				this.$u.api.address.getAddressInfo({address_id:address_id}).then(res => {
					console.log(res) 
					if(res.code != 1){ 
						this.$u.toast(res.msg)
						setTimeout(function(){
							uni.navigateBack();
						},1000)
						return false
					}
					this.address = res.data
				}).catch(err => {
					console.log(err)
					this.$u.toast('获取失败')
				})
			}
		},
		onLoad(option){ 
			if(option?.address_id){
				this.getAddressInfo(option.address_id)
			} 
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style scoped>
	// #ifdef H5
	uni-page-wrapper,uni-page-body {height: 100%;overflow: hidden;}
	.app {height: 100%;overflow: hidden;display: flex;flex-direction: column;}
	// #endif
	// #ifndef H5
	.app {height: calc(100vh);overflow: hidden;display: flex;flex-direction: column;}
	// #endif
	.address-info {flex: 1;}
	.address-bottom-row {padding: 20rpx;}
	.address-form {background-color: white;margin: 20rpx;border-radius: 16rpx;}
	/deep/ .u-form-item {padding: 20rpx !important;white-space: nowrap; }
	/deep/ .u-form-item--left {margin-right: 20rpx;}
	/deep/ .u-form-item__message{margin-left: 20rpx;}
	.address-goto-map {overflow: hidden;width: 100%;display: flex;align-items: center;justify-content: space-between;}
	.address-goto-map-tips {overflow: hidden;flex: 1;color: #888;font-size: 28rpx;text-overflow: ellipsis;}
	/deep/ .u-flex {overflow: hidden !important;}
	/deep/ .u-flex view {overflow: hidden !important;}
</style>